<app-nav> </app-nav>
<app-spinner
  *ngIf="isRequesting"
  [delay]="300"
  [message]="'Please wait...'"
  [isRunning]="isRequesting"
></app-spinner>
<div class="container ">
  <div class="col-sm-12">
    <div class="">
      <nav class="mt-4" aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a [routerLink]="['/overview']">Overview</a>
          </li>
          <li class="breadcrumb-item active" aria-current="page">Burn {{ nftName }} Commitment</li>
        </ol>
      </nav>
      <div class="box">
        <div class="box-header">
          <h3>Burn {{ nftName }} Commitment</h3>
        </div>

        <div class="box-body">
          <div class="text-center" *ngIf="!transactions">No {{ nftName }} Commitments Found</div>
          <div class="row" *ngIf="transactions">
            <div class="col-sm-6">
              <div class="form-group" *ngIf="transactions && transactions.length">
                <label for="name">Select Token</label>
                <div class="row">
                  <div class="col-sm-12">
                    <ng-select
                      #select
                      [items]="transactions"
                      class="custom"
                      [virtualScroll]="true"
                      [loading]="loading"
                      [multiple]="true"
                      [(ngModel)]="selectedCommitmentList"
                      [maxSelectedItems]="1"
                      [searchFn]="customSearchFn"
                      placeholder="Select Token Id"
                      style="width:75%;"
                    >
                      <ng-template ng-label-tmp let-item="item">
                        <span aria-hidden="true" class="ng-value-icon left" (click)="onRemove(item)"
                          >×</span
                        >
                        <b>{{ item.tokenUri }} </b> ({{ item.tokenId.slice(0, 20) }}...)&nbsp;
                      </ng-template>
                      <ng-template ng-option-tmp let-item="item" let-index="index">
                        <b>{{ item.tokenUri }}</b> ({{ item.tokenId.slice(0, 20) }}...)
                      </ng-template>
                    </ng-select>
                  </div>
                </div>
              </div>
              <div class="form-group" >
                <label for="publicKey">Select Receiver</label>
                <div class="row">
                  <div class="col-sm-12">
                    <select
                      class="form-control"
                      style="width:75%"
                      id="publicKey"
                      name="sellist1"
                      [(ngModel)]="receiverName"
                      required >
                      <option [ngValue]="undefined" selected>Select </option>
                      <option *ngFor="let user of users" value="{{ user }}">{{ user }}</option>
                    </select>
                  </div>
                </div>
              </div>
              

              <div class="row">
                <div class="form-group col-md-6">
                  <button
                    [disabled]="!selectedCommitmentList.length || !receiverName"
                    type="button"
                    class="btn btn-md btn-primary"
                    (click)="initiateBurn()"
                  >
                    Burn {{ nftName }} Commitment
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
